<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-23 13:36:00
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-10-11 15:00:14
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="add modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1244px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 733px!important;overflow: auto; width: 100%;">
                    <div class="p-formgroup-inline" >
                        <span class="p-field">
                            <span class="input-lable">产品图号：</span>
                            <input style=" width:150px;height: 35px;margin-right: 10px;" name="lotNo" pInputText
                                type="text" [(ngModel)]="lotNo" />
                        </span>
                        <span class="p-field ml">
                            <span class="input-lable">产品名称：</span>
                            <input style=" width:150px;height: 35px;margin-right: 10px;" name="productName" pInputText
                                type="text" [(ngModel)]="productName" />
                        </span>
                        <span class="p-field ml">
                            <span class="input-lable" style="margin-right: 26px;">规格：</span>
                            <input style=" width:150px;height: 35px;margin-right: 10px;" name="module" pInputText
                                type="text" [(ngModel)]="module" />
                        </span>
                        <span class="p-field ml">
                            <span class="input-lable">物料类别：</span>
                            <p-dropdown filter="true" name="materialsNodeId" [options]="materialsNodeOptions"
                                placeholder="请选择物料类别" [(ngModel)]="materialsNodeId" emptyFilterMessage="暂无数据"
                                (onChange)="onChange($event)">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span *ngIf="materialsNodeId !=  undefind "
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                    <span *ngIf="materialsNodeId ==  undefind "
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                        </span>
                        <span class="p-field ml">
                            <span class="input-lable">物料细类：</span>
                            <p-dropdown filter="true" name="materialCategoryId" [options]="materialCategoryOptions"
                                placeholder="请选择物料细类" [(ngModel)]="materialCategoryId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span *ngIf="materialCategoryId !=  undefind "
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                    <span *ngIf="materialCategoryId ==  undefind "
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                        </span>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 10px;">
                        <span class="p-field">
                            <span class="input-lable">物料属性：</span>
                            <p-dropdown filter="true" name="materialPropertyId" [options]="materialPropertyOptions"
                                placeholder="请选择物料属性" [(ngModel)]="materialPropertyId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span *ngIf="materialPropertyId !=  undefind "
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                    <span *ngIf="materialPropertyId ==  undefind "
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                        </span>
                        <span class="p-field ml">
                            <span class="input-lable" style="margin-left: 10px;">合格证号：</span>
                            <input style=" width:150px;height: 35px;margin-right: 10px;" name="certificateNo" pInputText
                                type="text" [(ngModel)]="certificateNo" />
                        </span>
                        <span class="p-field ml">
                            <span class="input-lable">放行单号：</span>
                            <input style=" width:150px;height: 35px;margin-right: 10px;" name="releaseNo" pInputText
                                type="text" [(ngModel)]="releaseNo" />
                        </span>
                    <p-button label="查询" (onClick)="getTableList()" style="margin-left: 334px;"></p-button>
                    <p-button label="重置" (onClick)="reset()" class="ml"></p-button>
                    </div>
                    <div class="row align-items-center" style="margin-top: 15px;">
                        <div class="primeng-datatable-container">
                            <p-table #dataTable [value]="tableData" (onLazyLoad)="getTableList($event)"
                             [lazy]="true" [scrollable]="true" ScrollWidth="100%" >
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 50px">序号</th>
                                    <th style="width: 150px">仓库名称</th>
                                    <th style="width: 150px">储位</th>
                                    <th style="width: 150px">产品图号</th>
                                    <th style="width: 150px">产品名称</th>
                                    <th style="width: 150px">规格</th>
                                    <th style="width: 150px">物料类别</th>
                                    <th style="width: 150px">物料细类</th>
                                    <th style="width: 150px">物料属性</th>
                                    <th style="width: 150px">合格证号</th>
                                    <th style="width: 150px">放行单号</th>
                                    <th style="width: 150px">库存数量</th>
                                    <th style="width: 150px">库存产品编号(件号)</th>
                                    <th style="width: 150px">*盘点数量</th>
                                    <th style="width: 150px">*盘点产品编号(件号)</th>
                                    <th style="width: 150px">盘点差异</th>
                                    <th style="width: 150px">备注</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 50px">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.stroeName}}</td>
                                    <td style="width: 150px">{{record.binLocation}}</td>
                                    <td style="width: 150px">{{record.productDrawingNo}}</td>
                                    <td style="width: 150px">{{record.productName}}</td>
                                    <td style="width: 150px">{{record.module}}</td>
                                    <td style="width: 150px">{{record.materialsNodeDesc}}</td>
                                    <td style="width: 150px">{{record.materialsContentDsec}}</td>
                                    <td style="width: 150px">{{record.materialsPropertyDesc}}</td>
                                    <td style="width: 150px">{{record.qualifiedNumber}}</td>
                                    <td style="width: 150px">{{record.releaseOrder}}</td>
                                    <td style="width: 150px">{{record.storeQuantity}}</td>
                                    <td style="width: 150px">{{record.storeProductNumber}}</td>
                                    <td pEditableColumn style="width: 150px" *ngIf="title == '盘点'">
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <input (blur)="contChange(rowIndex)" pInputText name="rowIndex" type="text"
                                                    [(ngModel)]="record.inventoryNo">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{record.inventoryNo}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td style="width: 150px;" *ngIf="title == '盘点查看'"> {{record.inventoryNo}} </td>
                                    <td pEditableColumn style="width: 150px" *ngIf="title == '盘点'">
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <input pInputText name="rowIndex" type="text"
                                                    [(ngModel)]="record.inventoryPartNo">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{record.inventoryPartNo}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td style="width: 150px;" *ngIf="title == '盘点查看'"> {{record.inventoryPartNo}} </td>
                                    <td style="width: 150px">{{record.differenceCount}}</td>
                                    <td pEditableColumn style="width: 150px" *ngIf="title == '盘点'">
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <input pInputText name="rowIndex" type="text"
                                                    [(ngModel)]="record.remark">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{record.remark}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td style="width: 150px;" *ngIf="title == '盘点查看'"> {{record.remark}} </td>
                                </tr>
                            </ng-template>
                        </p-table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;" *ngIf="title == '盘点'">
                    <button pButton [disabled]="!bopForm.form.valid" type="button" label="保存" (click)="save()"
                        style="margin-left: 0.5rem"></button>
                </div>
            </form>
        </div>
    </div>
</div>